<template>
  <div
    id="main11"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main11')
      var myChart = this.$echarts.init(chartDom)
      var option

      /**
 *
 * 作者: GhostCat
 * 博客: https://gcat.cc
 * 描述: 圆环辉光图表，自定义添加背景图和legend图标
 *
 */

      var img =
  ''

      var trafficWay = [
        {
          name: '病假',
          value: 20
        },
        {
          name: '事假',
          value: 10
        },
        {
          name: '婚假',
          value: 30
        },
        {
          name: '丧假',
          value: 40
        },
        {
          name: '年休假',
          value: 40
        },
        {
          name: '产假',
          value: 40
        },
        {
          name: '调休',
          value: 40
        },
        {
          name: '陪产假',
          value: 40
        }
      ]
      var nameArray = trafficWay.map((item) => {
        return item.name
      })

      var data = []
      var color = [
        '#2ca1ff',
        '#0adbfa',
        '#febe13',
        '#65e5dd',
        '#7b2cff',
        '#fd5151',
        '#f071ff',
        '#85f67a'
      ]
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 8,
                shadowBlur: 20,

                borderRadius: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          },
          {
            value: 8,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [105, 109],
          width: 280,
          height: 252,
          hoverAnimation: false,
          center: ['50%', '55%'],
          left: '20%',
          top: 'center',
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: data
        }
      ]
      option = {
        backgroundColor: '#0A2E5D',
        color: color,
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 280,
                height: 252
              },
              left: '20%',
              top: 'center'
            }
          ]
        },
        tooltip: {
          show: false
        },
        legend: [
          {
            icon: 'path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z',
            orient: 'vertical',
            // x: 'left',
            // data: nameArray.slice(4, 8),
            data: nameArray,
            left: '80%',
            top: 'center',
            align: 'left',
            textStyle: {
              color: '#fff'
            },
            itemGap: 20
          }
          // {
          //   icon: 'path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z',
          //   orient: 'vertical',
          //   // x: 'left',
          //   data: nameArray.slice(0, 4),
          //   left: '70%',
          //   top: 'center',
          //   align: 'left',
          //   textStyle: {
          //     color: '#fff'
          //   },
          //   itemGap: 20
          // }
        ],
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
